<template>
  <div class="calendar-days">
    <div class="calendar-week clearfix">
      <a>日</a>
      <a>一</a>
      <a>二</a>
      <a>三</a>
      <a>四</a>
      <a>五</a>
      <a>六</a>
    </div>
    <!-- 日期类型panel 及日期类型选中发送事件 -->
    <div class="calendar-list clearfix">
      <a v-for="(item, index) in days" :key="index" :class="[_dayClass(item)]"  @click="_selectDay(item,$event)" 
        >{{ item.d }}>
        <!-- <span v-text="_innerHTML(item)" v-if="_innerHTML(item)"></span> -->
      </a>
    </div>
    <!-- datetime带具体时间选择   --> 
    <div class="calendar-time clearfix" v-if="type==='datetime'">
      <div class="calendar-time-input">
        <input type="text" v-model="hours" maxlength="2" oninput="value=value.replace(/[^\d]/g,'')" onfocus="this.select()">:
        <input type="text" v-model="minutes" maxlength="2" oninput="value=value.replace(/[^\d]/g,'')" onfocus="this.select()">:
        <input type="text" v-model="seconds" maxlength="2" oninput="value=value.replace(/[^\d]/g,'')" onfocus="this.select()">
      </div>
      <a class="btn-time" @click="_selectConfirm">确定</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "day",
  data() {
    return {
      selectValue: this.bodyValue || new Date(),
      hours: this.value.getHours(),
      minutes: this.value.getMinutes(),
      seconds: this.value.getSeconds(),
    };
  },
  props: {
    value: null,
    bodyValue: null,
    type: String, // 日期类型
  },
  created() {
    console.log(this.value);
  },
  components: {},
  methods: {
    _dayClass(item) {
      // 添加相对应样式，今天、禁用
      let time = new Date(item.y, item.m, item.d);
      let time2 = this.selectValue.toDateString(); // 这里用初始值，否则选了上下年月，会一直选中一天
      return {
        "calendar-date-out": item.p || item.n, // 非当前月
        "calendar-date-today":
          time.toDateString() === new Date().toDateString(), // 今天的
        "calendar-date-select": time.toDateString() === time2, // 选中的
        // "calendar-date-disabled": this.$parent.disabledDate(time), // 不能选择的
      };
    },
    _selectDay (item, e) {
      // item   {d: 6, y: 2020, m: 10}  当前选中的 天-年-月
      let disabled = e.target.className
      //disabled  如果选中了 上个月或者下个月 disabled 状态的日期 则输出 class 名字
      if (disabled.indexOf('calendar-date-disabled') === -1) {
        const date = new Date(item.y, item.m, item.d)
        //如果点击到 非disabled 的月份日期 则将当前日期转为 toString 形式输出
        if (this.type === 'datetime') {
          // 有时分秒选择时不关闭，保存选中值
          this.selectValue = date
        } else {
          this.$emit('click', date.toDateString())
        }
      }
    },
    _selectConfirm () {
      this.hours = this.hours > 23 ? 23 : this.hours
      this.minutes = this.minutes > 59 ? 59 : this.minutes
      this.seconds = this.seconds > 59 ? 59 : this.seconds
      this.selectValue.setHours(this.hours)
      this.selectValue.setMinutes(this.minutes)
      this.selectValue.setSeconds(this.seconds)
      this.$emit('click', this.selectValue)
    },
    _innerHTML(item) {
      let time = new Date(item.y, item.m, item.d);
      // return this.$parent.innerHTML && this.$parent.innerHTML(time);
      return time;
    },
  },
  computed: {
    days() {
      let days = [];
      const year = this.value.getFullYear();
      const month = this.value.getMonth();
      const time = new Date(year, month, 1);
      
      // 计算上个月剩多少天
      time.setDate(0); // 切换到上个月的最后一天
      let lastDay = time.getDate(); // 当月天数
      const week = time.getDay(); // 星期几，前面已切换为上月最后一天，这里表示上个月最后一天是星期几
      let count = week + 1; // 星期天开始
      while (count > 0) {
        days.push({
          d: lastDay - count + 1,
          y: month > 0 ? year : year - 1, // 0为1月，即上一年
          m: month > 0 ? month - 1 : 11,
          p: true,
        });
        count--;
      }

      // 当前月
      time.setMonth(time.getMonth() + 2, 0); // 切换到当前月份的最后一天，+2是个月了，0再切换到上个月，即当前月
      lastDay = time.getDate(); // 当月天数
      for (let i = 1; i <= lastDay; i++) {
        days.push({
          d: i,
          y: year,
          m: month,
        });
      }
      // // 下个月
      for (let i = 1; days.length < 42; i++) {
        days.push({
          d: i,
          y: month < 11 ? year : year + 1,
          m: month < 11 ? month + 1 : 0,
          n: true,
        });
      }

      return days; //2: {d: 27, y: 2020, m: 9, p: true}
      //3: {d: 28, y: 2020, m: 9, p: true}
      //4: {d: 29, y: 2020, m: 9, p: true}
      //5: {d: 30, y: 2020, m: 9, p: true}
      //6: {d: 31, y: 2020, m: 9, p: true}
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.calendar-days {
  a {
    float: left;
    width: 14.28%;
    height: 25px;
    line-height: 25px;
    display: block;
    font-size: 12px;
    color: #333;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    &:hover {
      background: #eaf8fe;
    }
    span {
      position: absolute;
      font-size: 10px;
      right: -3px;
      top: -6px;
      color: #2d8cf0;
      z-index: 2;
    }
  }

  .calendar-week {
    a {
      cursor: default;
      &:hover {
        background: none;
      }
    }
  }
  /*非当前月*/
  .calendar-date-out {
    color: #999;
  }
  /*当前选中*/
  .calendar-date-select {
    color: #f60;
  }
  /*今天的*/
  .calendar-date-today {
    text-decoration: underline;
  }
  //不能选择的
  .calendar-date-disabled {
    color: #ccc;
    cursor: not-allowed !important;
    &:hover {
      background: none;
    }
  }
}
</style>
